<template>
  <div class="page">
    <div class="head">
      <img src="./assets/img/logo.png" alt="" class="logo" />
      <span class="title">重设密码</span>
    </div>
    <div class="body">
      <div class="panel">
        <a-button type="link" class="back-login" @click="router.go(-1)">
          <LeftOutlined />返回登录
        </a-button>
        <div class="cn-medium title">重设密码</div>

        <div class="item2 i-gap">
          <div class="fill item">
            <div class="icon">
              <img src="./assets/img/tel.png" alt="" />
            </div>
            <a-input
              class="fill"
              :bordered="false"
              v-model:value.trim="form.mobile"
              placeholder="请输入手机号"
            />
          </div>
          <!-- :disabled="!src" -->
          <div class="captcha">
            <a-button type="primary" :class="['getCode', isPhone ? 'btn-login' : 'btn-invalid']"  @click="getVerCode">
              {{ `${ !timer ? '发送验证码' :  timerNum + 'S重新发送' }` }}
            </a-button>
          </div>
        </div>

        <div class="item i-gap">
          <div class="icon">
            <img src="./assets/img/email.png" alt="" />
          </div>

          <a-input
            class="fill"
            :bordered="false"
            v-model:value.trim="form.randomMsgCode"
            placeholder="请输入验证码"
          />
        </div>


        <div class="item i-gap">
          <div class="icon">
            <img src="./assets/img/shop.png" alt="" />
          </div>
          <a-select
            v-model:value="form.storeList"
            placeholder="请选择店铺名称"
            class="fill"
            :options="shopData"
            :allow-clear="true"
            :bordered="false"
            @change="onChangeShop"
          >
          </a-select>
        </div>

        <div class="item i-gap">
          <div class="icon">
            <img src="./assets/img/lock.png" alt="" />
          </div>

          <a-input-password
            class="fill"
            :bordered="false"
            type="password"
            v-model:value.trim="form.passWord"
            placeholder="请输入新密码"
          />
        </div>

        <div class="item i-gap">
          <div class="icon">
            <img src="./assets/img/lock.png" alt="" />
          </div>

          <a-input-password
            class="fill"
            :bordered="false"
            type="password"
            v-model:value.trim="form.confirmPassWord"
            placeholder="请再次输入新密码"
          />
        </div>

        <div :class="['use', 'btn', isValid(false) ? 'btn-login' : 'btn-invalid']" :loading="sendLoading" @click="onReset">
          立即提交
        </div>

        <div class="tips">提示：为确保账户安全，请三个月修改一次密码!</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, watch, computed } from 'vue';
import { useMessage } from '@/hooks/web/useMessage';
import { appendArg, POST, URL } from '@/api/http';
import { useUserStore } from '@/store/modules/user';
import { encrypt } from '@/api/aes';
import {beauticianRef} from "@/views/cashier/cart";
import { useRouter } from 'vue-router'
import { LeftOutlined } from '@ant-design/icons-vue';

  const router = useRouter()

  const { createMessage } = useMessage();
  const userStore = useUserStore();
  const shopData = ref([])
  const form = reactive({
    loginType: 'pc',
    mobile: '',
    storeList:[],
    storeCode:'',
    passWord: '',
    confirmPassWord: '',
    randomMsgCode: '',
  });

  const timer = ref(null)
  const timerNum = ref(0)
  const isStaff = ref(false)
  const sendLoading = ref(false)

  const phoneReg = /^1[345789]\d{9}/;

  const isPhone = computed(() => {
    return phoneReg.test(form.mobile)
  })

  function onChangeShop(e){
    form.storeCode = e
  }
  watch(
    () => form.mobile,
    (newVal) => {
      if (isPhone.value) {
        POST('/membership/getStoreListByEmployeeMobile', {siteCodes: 'shop', mobile: newVal
        }).then((res) => {
          isStaff.value = true
          shopData.value = res.map((o) => ({
              value: o.storeCode,
              label: o.storeName,
            })) ?? [];
        }).catch(e => {
          isStaff.value = false
        })
      }
    }
  )

  function getVerCode() {
    if (!isPhone.value) return createMessage.error('请输入正确的手机号')
    else if ( !isStaff.value ) return createMessage.error('该号码非员工手机号，请填写员工手机号')
    else if (timer.value) return 
    timerNum.value = 60
    timer.value = setInterval(() => {
      timerNum.value--
      if (timerNum.value < 1) {
        clearInterval(timer.value)
        timer.value = null
      }
    }, 1000)

    POST('/membership/sendChangeEmployeePasswordSms', {
      mobile: form.mobile
    }).then(res => {
      // createMessage.success('验证码已发送')
    })
  }

  function onReset() {
    if (!isValid(true)) return;
    const { mobile, confirmPassWord, randomMsgCode, storeList, loginType } = form;
    sendLoading.value = true
    const newPassWord = encrypt(confirmPassWord)
    POST('/membership/changeEmployeePasswordByMobile', {
      storeCode: storeList,
      mobile, loginType, 
      newPassWord, randomMsgCode
    }).then(res => {
      createMessage.success('密码重设成功')
      router.back()
    }).finally(() => {
      sendLoading.value = false
    })
  }

  function isValid(tip) {
    const { mobile, passWord, confirmPassWord,  randomMsgCode, storeList } = form;
    const passReg = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[^\da-zA-Z\s]).{8,15}$/
    if (!mobile || !isPhone.value) {
      tip && createMessage.error('请输入正确的手机号');
      return false;
    }
    if (!randomMsgCode) {
      tip && createMessage.error('请输入验证码');
      return false;
    }

    if(storeList?.length===0) {
      tip && createMessage.error('请选择店铺名称');
      return false;
    }
    if (!passWord) {
      tip && createMessage.error('请输入新密码');
      return false;
    }

    if (!passReg.test(passWord)) {
       tip && createMessage.error('密码需要8~15位数字,包含英文+数字+特殊字符');
      return false;
    }

    if (!confirmPassWord) {
      tip && createMessage.error('请再次输入新密码');
      return false;
    }

    if (passWord !== confirmPassWord) {
      tip && createMessage.error('两次密码输入不一致');
      return false;
    }
    return true;
  }
</script>

<style lang="less" scoped>
  .page {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    background-color: #f8ebe3;
  }

  .head {
    display: flex;
    align-items: center;
    width: 100%;
    height: 54px;
    background: #fff;

    .logo {
      width: 228px;
      margin-left: 20vw;
    }

    .title {
      margin-left: 2vw;
      color: #f1a3b8;
      font-size: 12px;
      font-weight: 600;
    }
  }

  .body {
    display: flex;
    position: relative;
    flex: 1;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    background: url('./assets/img/bg.png') no-repeat;
    background-size: contain;
  }

  .panel {
    position: relative;
    width: 360px;
    min-height: 360px;
    margin-right: 14vw;
    padding: 16px 24px 24px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 16px 0px 32px 0px rgba(0,0,0,0.02);
    
    .back-login {
      position: absolute;
      left: 5px;
      top: 15px;
      color: #ACB4BF;
    }

    .title {
      padding: 6px 0 12px;
      font-size: 16px;
      text-align: center;
    }

    .item {
      padding: 4px 10px;
      border: 1px solid #e0e5ec;
      border-radius: 6px;
    }
    .ant-select-selector {
      border: none !important;
    }
    .item,
    .item2 {
      display: flex;
      align-items: center;
    }

    .i-gap {
      margin: 18px 0;
    }

    .icon {
      margin-right: 4px;
    }

    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 12px 0;
    }

    .btn-invalid {
      background: #ced2d9;
    }

    .btn-login {
      background-color: #f1a3b8;
    }

    .btn-login,
    .btn-invalid {
      height: 40px;
      border-radius: 6px;
      color: #fff;
    }

    .btn2 {
      color: #f1a3b8;
      font-size: 13px;
      font-weight: 400;
    }

    .captcha {
      width: 120px;
      margin-left: 8px;
      cursor: pointer;

    }
  }

  .tips {
    font-size: 14px;
    margin-top: 20px;
    color: #ACB4BF;
    text-align: center;
  }
  .getCode {
    width: 100%;
    height: 40px;
  }
</style>
